<template>
  <svg :class="className" :style="{color: this.color}" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
/**
 * aria 是无障碍前缀
 * aria-hidden 是避免屏幕识别器读取到无意义的内容
 * 
 * svg图标的实现原理
 */
const size = ['medium', 'small', 'mini']

export default {
  name: 'icon',
  props: {
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#666'
    },
    size: {
      type: String,
      default: 'medium',
      validator (value) {
        return size.indexOf(value) !== -1
      }
    }
  },
  computed: {
    className () {
      return {
        icon: true,
        [`icon--${this.size}`]: this.size || false
      }
    },
    iconName () {
      return '#icon' + this.name
    }
  }
}
</script>

<style lang="scss" scoped>
  .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;

    &--medium {
      font-size: 1.5em;
    }
    &--small {
      font-size: 1em;
    }
    &--mini {
      font-size: 0.5em;
    }
  }
</style>
